<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
	<title>task1</title>
</head>
<body>
    <div class="mian">
    	<h1>网站的一级标题</h1>
    	<ul>
    		<li><a href="">导航链接一</a></li>
    		<li><a href="">导航链接二</a></li>
    		<li><a href="">导航链接三</a></li>	
    		<li><a href="">导航链接四</a></li>	
    	</ul>
    	<main>
    	    <article class="art1">
	            <hgroup>
	    		  <h1>文章一级标题</h1>
	    		  <h2>文章二级标题</h2>
	    		</hgroup>
	    		<aside>文章作者&nbsp文章发表时间</aside>
	    		<p>这是一段很长的段落，这是一段很长的段落<br/>
	    		换行了
	    		</p>
	    		<p>这是一段很长的段落，这是一段很长的段落</p>
	    		<p>这是一段很长的段落，这是一段很长的段落，<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
	    		<p><img src="E:\前端学习\BaiduWeb\task1.jpg"></p>
	    		<p>这是一段很长的段落，这是一段很长的段落<br/>
	    		换行了
	    		</p>
	    		<p>这是一段很长的段落，这是一段很长的段落</p>
	    		<p>这是一段很长的段落，这是一段很长的段落，<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
            </article>
            <article class="art2">
	          	<hgroup>
	    		  <h1>另一篇文章一级标题</h1>
	    		  <h2>文章二级标题</h2>
	    		</hgroup>
	    		<aside>文章作者&nbsp文章发表时间</aside>
	    		<p>这是一段很长的段落，这是一段很长的段落<br/>
	    		换行了
	    		</p>
	    		<p>这是一段很长的段落，这是一段很长的段落</p>
	    		<p>这是一段很长的段落，这是一段很长的段落，<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
	    		<p><img src="E:\前端学习\BaiduWeb\task1.jpg"></p>
	    		<ul>
	    			<li>列表项目一</li>
	    			<li>列表项目二</li>
	    			<li>列表项目三</li>
	    		</ul>
	    		<div class="pic">
	    			<h3>图片</h3>
	    			<ul>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    				<ol style="margin-bottom: 20px">
	    					好看的图片<br/>
	    					<img src="E:\前端学习\BaiduWeb\task1.jpg">
	    				</ol>
	    			</ul>
	    		</div>
            </article>
            <article class="art3">
            	<hgroup>
            		<h1>最后一篇文章一级标题</h1>
            		<h2>文章二级标题</h2>
            	</hgroup>
            	<aside>文章作者&nbsp文章发表时间</aside>
            	<ol>
            		<li>排名1</li>
            		<li>排名2</li>
            		<li>排名3</li>
            	</ol>
            	<p>下面是一个表格，给表格加上一个border=“1”好让你看出是一个表格</p>
            	<table border="1">
            		<tr>
            			<th>表头</th>
            			<th>表头</th>
            			<th>表头</th>
            		</tr>
            		<tr>
            			<td>表内容单元格</td>
            			<td>表内容单元格</td>
            			<td><a href="">操作</a></td>
            		</tr>
            		<tr>
            			<td>表内容单元格</td>
            			<td>表内容单元格</td>
            			<td><a href="">操作</a></td>
            		</tr>
            		<tr>
            			<td>表内容单元格</td>
            			<td>表内容单元格</td>
            			<td><a href="">操作</a></td>
            		</tr>
            		<tr>
            			<td>表内容单元格</td>
            			<td>表内容单元格</td>
            			<td><a href="">操作</a></td>
            		</tr>
            		<tr>
            			<td>总计</td>
            			<td colspan="2">1000</td>
            		</tr>

            	</table>
         
            </article>
            <div class="sidebar">
            	<h1>这里以后是一个侧栏，这是侧栏的标题</h1>
            	<h2>侧栏注册窗口标题</h2>
            	<form class="register">
            	    <p>请输入邮箱地址：<input type="text" name="input" value="这是一个文本输入框"></input></p>
            	    <p>邮箱地址请按要求格式输入</p>
            	    <p>请输入密码：<input type="text" name="password" value="这是一个文本输入框"></input>
            	    请重复输入密码：<input type="text" name="password" value="这是一个文本输入框"></input></p>
            	    <p>密码请为6-16位英文数字</p>
            	</form>
            	<form class="detail">
            	    性别：
            		<input name="sex" id="male" type="radio" value="" checked="checked"></input>
            		<label for="male">男</label>
            		<input name="sex" id="female" type="radio" value=""></input>
            		<label for="female">女</label>
            		城市：
            		<select name="city">
            			<option value="北京">北京</option>
            			<option value="鞍山">鞍山</option>
            			<option value="开封">开封</option>
            		</select>
            		爱好：
            		<input type="checkbox" name="sports">运动</input>
            		<input type="checkbox" name="art">艺术</input>
            		<input type="checkbox" name="tech">科学</input>
            		个人描述：
            		<textarea name="textarea" >这是一个多行输入框，输入您的个人描述</textarea>
            		<input type="submit" value="确认提交"></input>
            	</form>
            </div>
            

    	</main>
    	<footer style="margin-top: 20px">版权所有&copy</footer>
    	
    </div>
</body>
</html>